<template>
	<view class="form-item">
		<view class="label" :style="{width: `${labelWidth}rpx`}">地区</view>
		<view class="shape"></view>
		<view class="input" :style="{width: `calc(100% - ${labelWidth}rpx - 80rpx - 3rpx)`}">
			<view class="input-body">
				{{selfCity}}
			</view>
		</view>
		<view class="action" @click="showArea = !showArea">
			<text class="iconfont icon-xiala"></text>
		</view>
		<view class="area-container" v-if="showArea">
			<view :class="`item ${selfCity === '全部' ? 'item__active':''}`" @click="setCurArea('全部')">
				全部
			</view>
			<view :class="`item ${selfCity.indexOf(key) !== -1 ? 'item__active':''}`" @click="setCurArea(key)" v-for="(value, key) in areaList" :key="key">
				{{key}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		projectCityApi
	} from '@/api/project.js';
	export default{
		data() {
			return {
				areaList: {},
				showArea: false,
				selfCity: '全部'
			}
		},
		props: {
			value: {
				type: String,
				default: "全部"
			},
			labelWidth: {
				type: Number,
				default: 77
			},
			type: {
				type: String,
				default: "multiple"
			},
		},
		watch: {
			value(nv) {
				this.selfCity = nv;
			}
		},
		methods: {
			setCurArea(item) {
				let city = this.selfCity;
				if (item === '全部') {
					city = item;
				} else {
					if (city === '全部') {
						city = "";
					}
					const arr = city.split(',');
					if (arr.indexOf(item) === -1) {
						arr.push(item);
					} else {
						arr.splice(arr.indexOf(item), 1);
					}
					city = arr.filter(e => e !== '').join(',');
					
				}
				if (city == '') {
					city = '全部'
				}
	
				this.showArea = false;
				if (this.type === 'single') {
					this.selfCity = item;
					this.$emit('onChange', item);
				} else {
					this.selfCity = city;
					this.$emit('onChange', city);
				}
				
				
			},
			async fetchCity() {
				uni.showLoading({title: '加载中...'});
				const { data } = await projectCityApi();
				uni.hideLoading();
				if (data.code === 1) {
					this.areaList = data.data;
				}
			},
		},
		mounted() {
			this.selfCity = this.value;
			this.fetchCity();
		}
	}
</script>

<style lang="scss" scoped>
	.form-item{
		
			width: 600rpx;
			height: 48rpx;
			border-radius: 20rpx;
			border: solid 2rpx #1534ce;
			margin: 0 auto;
			margin-bottom: 34rpx;
			@include clear();
			position: relative;
			.label{
				float: left;
				width: 77rpx;
				height: 48rpx;
				text-align: center;
				line-height: 48rpx;
				font-size: 26rpx;
				font-weight: normal;
				font-stretch: normal;
				letter-spacing: 0rpx;
				color: #1534ce;
			}
			.shape{
				width: 3rpx;
				height: 32rpx;
				background-color: #7f98ae;
				float: left;
				margin-top: 8rpx;
			}
			.input{
				float: left;
				width: calc(100% - 77rpx - 80rpx - 3rpx);
				.input-body{
					box-sizing: border-box;
					width: 100%;
					height: 44rpx;
					line-height: 44rpx;
					font-size: 26rpx;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: #1534ce;
					text-align: center;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}
			}	
			.action{
				float: left;
				width: 80rpx;
				line-height: 44rpx;
				height: 44rpx;
				text-align: center;
				font-size: 32rpx;
				color: #1534ce;
				transition: 0.3s ease;
			}
			.action__active{
					transform: rotate(180deg);
			}
		
	}
	.area-container{
		
			position: absolute;
			top: 70rpx;
			left: 0rpx;
			z-index: 10;
			width: 600rpx;
			background-color: #1433cd;
			border-radius: 20rpx;
			box-sizing: border-box;
			padding: 24rpx;
			padding-bottom: 12rpx;
			&::before{
				position: absolute;
				top: -12rpx;
				left: 32rpx;
				content: '';
				border-bottom: 12rpx solid #1433cd;
				border-left: 12rpx solid transparent;;
				border-right: 12rpx solid transparent;
			}
			.item{
				padding: 0 18rpx;
				height: 44rpx;
				background-color: #fafbfd;
				border-radius: 20rpx;
				margin-bottom: 12rpx;
				color: #1433cd;
				font-size: 26rpx;
				text-align: center;
				line-height: 44rpx;
				float: left;
				margin-right: 12rpx;
			}
			.item__active{
				background-color: orange;
				color: #fff;
			}
			
		
	}
</style>
